<template>
	<view class="index">
		
		<view class="head">
			<view class="money">
				<text @click="sign()">签到领钱</text>
			</view>
			<text class="appname">万象生活团购</text>
		</view>
		
		<!-- 搜索框 -->
		<view class="search">
			<view class="" @click="isShow">
				<!-- 模态框 -->
				<view class="cu-form-group">
					<picker mode="region" @change="RegionChange" :value="region">
						<view class="picker">
						</view>
						<view class="title">
							<text>{{region[1]}}</text>
							<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/arrow.png" style="width:36rpx;height: 14rpx;margin-top:30rpx;margin-left: 20rpx"
							 mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<input @blur="drop()" type="text" v-model="message" placeholder="输入市场,商家,蔬菜" @confirm="Search()" @input="onInput" />
			<image class="searchlogo" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/search.png" mode=""></image>
			<view class="map">
				<image @click="getAddress()" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/local.png" mode=""></image>
			</view>

			<view class="seathing" v-show="alt">
				<image class="seathinglogo" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/search.png" mode=""></image>
				<text id="inpsea" @click="thing" style="padding-left: 30px;">{{value}} 商品</text>
				<image class="seathinglogo2" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/search.png" mode=""></image>
				<text id="inpsea2" @click="market" style="padding-left: 30px;">{{value}} 店铺</text>
			</view>

		</view>
		<!-- 轮播图 -->
		<swiper indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)" class="swiper"
		 :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
			<swiper-item v-for="item in bannerlist" :key="item.vid">
				<view class="swiper-item uni-bg-red">
					<image class="swiperimage" :src="item.bannerImage" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- logo图 -->
		<view class="toplogo">
			<view class="logo">
				<view v-for="item in logolist" :key="item.id" class="logobox" @click="handelBtn(item.id)">
					<view class="brand">
						<image class="brand_img" :src="item.img "></image>
						<text style="color: #333333;font-size: 28rpx;font-weight: bold;display: block;">{{item.name}}</text>
					</view>

				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="Allcontent">
			<view class="shop" v-for="item in allList" :key="item.id">
				<!-- 图片 -->
				<view @click="go(item.id)" class="shopimg">
					<image :src="item.images" mode=""></image>
				</view>
				<view class="shopword">
					<!-- 名字 -->
					<text class="shopname">{{item.commodityName}}</text>
					<!-- 介绍 /说明-->
					<view class="shopint">
						<text class="intext">{{item.explains}}</text>
					</view>
					<view class="shopjoin">
						<text>{{item.distribution==0?'分销':'不分销'}}</text>
					</view>
					<view class="monthgod">
					</view>
					<view class="shopmoney">
						<text style="font-size: 20rpx;color: #000000;">￥</text>
						<text style="color: #FF6633;font-size: 34rpx;font-weight: bold;">{{item.currentPrice}}</text>
						<text style="color: #999999;font-size: 20rpx;font-weight:bold;text-decoration: line-through;margin-left: 20rpx;">￥{{item.originalPrice}}</text>
						<view @click="go(item.id)" class="Qbuy">
							<text>抢购</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				curntpage: 1, //加载页数
				allPage: '', //数据总页数
				value: "",
				alt: false,
				indicatorDots: true,
				vertical: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true,
				activeClass: 0,
				show: false,
				bannerlist: [],
				// 商品数组
				allList: [],
				regionChoice: '',
				region: ['四川省', '成都市', '武侯区'],
				// logo数组
				logolist: [{
						id: 1,
						img: "https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/icon1.png",
						name: '智慧菜场',
					},
					{
						id: 2,
						img: "https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/icon1.png",
						name: '特惠美食',
					},
					{
						id: 3,
						img: "https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/icon3.png",
						name: '休闲娱乐'
					},
					{
						id: 4,
						img: "https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/icon4.png",
						name: '丽人美发'
					},
					{
						id: 5,
						img: "https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/icon5.png",
						name: '生活服务'
					},
					{
						id: 6,
						img: "https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/icon2.png",
						name: '景点门票'
					},
				],

				// 城市
				cityList: [{
					index: 0,
					name: '全城'
				}, {
					index: 1,
					name: '锦江区'
				}, {
					index: 2,
					name: '高新区'
				}, {
					index: 3,
					name: '天府新区'
				}, {
					index: 4,
					name: '武侯区'
				}, {
					index: 5,
					name: '青羊区'
				}, {
					index: 6,
					name: '成华区'
				}, {
					index: 7,
					name: '新都区'
				}, {
					index: 8,
					name: '温江区'
				}]
			}
		},
		onLoad() {
			this.judge();
			// 轮播图
			const requestParam = {
				url: `/api/commodity/banner/list`,
				method: "POST",
				data: {
					vid: 1,
					current: 1,
					size: 10
				},
				callBack: (res) => {
					if (res.code == 200) {
						this.bannerlist = res.data
					}
				}
			}
			this.$http.request(requestParam, true)
			this.getgoodsList();

		},

		onPullDownRefresh() {
			// 刷新初始化数据
			this.size = 10
			this.current = 1
			// 调用获取数据的函数
			this.getgoodsList()
			// 关闭刷新动画
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},

		// 上拉加载
		onReachBottom() {
			console.log('触底')
			console.log(this.curntpage)
			console.log(this.allPage)
			if (this.curntpage == this.allPage) {
				console.log('当前访问页面已经到最后一页')
				uni.showToast({
					title: '当前访问页面已经到最后一页',
					icon: "none",
				})
			} else {
				this.curntpage++
				setTimeout(() => {
					// 调用请求数据的方法
					this.getgoodsList()
				}, 300)
			}
		},

		methods: {
			// 活动是否开启
			sign() {
				const requestStart = {
					url: `/api/account/selectSignState`,
					method: "get",
					data: {},
					callBack: (res) => {
						console.log(res.data.state);
						if (res.data.state == false) {
							uni.navigateTo({
								url: '../index/Issign'
							})
						} else {
							uni.navigateTo({
								url: '../index/Sign'
							})
						}
					}
				}
				this.$http.request(requestStart)
			},
			
			//判断是否授权地理位置
			judge() {
				let that = this;
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							wx.authorize({
								scope: 'scope.userLocation',
								success() {
									that.getLocation();
								}
							})
						} else {
							that.getLocation();
						}
					}
				})
			},
			
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log(res)
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						uni.setStorageSync('longitude',that.longitude);
						uni.setStorageSync('latitude',that.latitude);
						that.getgoodsList();
						
					},
					fail: function(err) {
						uni.setStorageSync('longitude',that.longitude);
						uni.setStorageSync('latitude',that.latitude);
						that.getgoodsList();
						
					}
				})
			},
			
			RegionChange(e){
				this.region = e.detail.value
				console.log(this.region)
				var regions = JSON.stringify(e.detail.value)
				console.log(regions)
				uni.navigateTo({
					url: './localtwo?city=' + regions + '&type=1'
				})
			},
			
			getAddress() {
				//返回地理位置信息\
				let that = this;
				uni.chooseLocation({
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
					success: function(res) {
						uni.setStorageSync('latitude', res.latitude)
						uni.setStorageSync('longitude', res.longitude)
						uni.navigateTo({
							url: './Around'
						})
						uni.setStorageSync('address', res.address)
						// that.getgoodsList();
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
					}
				})
			},
			getgoodsList() {
				// 商品推荐
				const requestShop = {
					url: `/api/commodity/index/list`,
					method: "POST",
					data: {
						vid: 3,
						province: "四川省",
						city: "成都市",
						longitude: 104.876555555,
						latitude: 30.10987652,
						distance: "5000000",
						current: 1,
						size: 10,
						distribution: "分销"
					},
					callBack: (res) => {
						this.text = 'request success';
						this.allList = res.data.records
					}
				}
				this.$http.request(requestShop, true)
			},
			handelBtn(e) {
				console.log(e)
				if (e === 1) { //智慧菜场
					uni.navigateTo({
						url: './digital'
					})

				} else if (e === 2) {
					uni.navigateTo({
						url: './food'
					})
				} else if (e === 3) {
					uni.navigateTo({
						url: './entertainment'
					})
				} else if (e === 4) {
					uni.navigateTo({
						url: './beauty'
					})
				} else if (e === 5) {
					uni.navigateTo({
						url: './life'
					})
				} else if (e === 6) {
					uni.navigateTo({
						url: './scenic'
					})
				}
			},
			market() {
				uni.navigateTo({
					url: './Local?vid=' + 1 + "&val=" + this.value
				})
			},
			thing() {
				uni.navigateTo({
					url: './localtwo?vid=' + 0 + "&val=" + this.value
				})
			},
			drop() {
				this.alt = false
			},
			getItme(index) {
				this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
				// console.log(index)
			},

			isShow() {
				this.show = !this.show;
			},

			go(e) {
				uni.navigateTo({
					url: './Hotdetails?sid=' + e
				})
			},

			Search() {
				console.log(111)
				uni.navigateTo({
					url: './Local'
				})
			},
			// 监听搜索框
			onInput(e) {
				console.log(e.detail.value)
				this.value = e.detail.value
				console.log(this.value)
				this.alt = true
			},
		}
	}
</script>

<style>
	.head {
		width: 100%;
		height: 120rpx;
		background-color: #FFC300;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		position: fixed;
		top: 0;
		z-index: 22;
	}
	
	.head .money {
		font-size: 14px;
		margin: 65rpx 0 0 20rpx;
	}
	
	.head .appname {
		color: #FFFFFF;
		font-size: 18px;
		margin: 55rpx 0 0 170rpx;
	}
	
	.cu-form-group .title{
		width: 180rpx;
	}
	
	..title text{
		font-size: 28rpx
	}
	
	.seathing {
		width: 700rpx;
		height: 156rpx;
		padding: 0 25rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 80rpx;
		left: -20rpx;
		z-index: 2;
		background-color: white;
	}

	.seathing .seathinglogo {
		position: absolute;
		top: 25rpx;
		left: 30rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.seathing .seathinglogo2 {
		position: absolute;
		top: 105rpx;
		left: 30rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.seathing text {
		padding: 20rpx 0;
		height: 38rpx;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.Allcontent {
		/* width: 100%; */
		/* height: 720rpx; */
		background-color: #FFFFFF;
	}

	.madalbox {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100vh;
		z-index: 100;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.modal {
		width: 100%;
		height: 388rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 118rpx;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
	}

	.topbox {
		width: 200rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		line-height: 120rpx;
		text-align: center;
	}

	.active {
		border: 2rpx solid #FCC100 !important;
		color: #FCC100 !important;
	}

	.modal .top {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.aboutcity {
		width: 206rpx;
		height: 60rpx;
		border: 2rpx solid #707070;
		border-radius: 10rpx;
		margin: 20rpx;
		text-align: center;
		line-height: 60rpx;
		color: #707070;
		font-size: 34rpx;
	}

	.bottomword {
		height: 62rpx;
		width: 710rpx;
		border: 2rpx solid #707070;
		margin-left: 20rpx;
		border-radius: 10rpx;
		line-height: 62rpx;
	}

	/* 轮播图 */
	.swiper {
		width: 100%;
		border: 2rpx solid #ECECEC;
	}

	/* 搜索框 */
	.search {
		margin-top: 122rpx;
		display: flex;
		height: 64rpx;
		padding: 28rpx 32rpx;
		position: relative;
	}

	.search span {
		font-size: 28rpx;
		color: #000000;
		/* margin-left: 10rpx; */
		margin-top: 18rpx;
	}

	.search .searchlogo {
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		top: 45rpx;
		left: 238rpx;
	}

	input {
		border: 2rpx solid #E5E5E5;
		background-color: #E5E5E5;
		height: 60rpx;
		border-radius: 40rpx;
		width: 380rpx;
		line-height: 60rpx;
		text-align: left;
		padding-left: 60rpx;
		letter-spacing: 0rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
	}

	.map image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
	}

	.swiperimage {
		width: 100%;
	}

	.top_logo {
		background-color: #fff;
		margin: 0 10px;
		padding: 20px 10px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	/* 分类盒子 */

	.toplogo {
		height: 396rpx;
		width: 100%;
		background-color: #EEEEEE;
	}

	.logo {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.logobox {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 29%;
		margin-top: 35rpx;
	}

	.brand {
		border-radius: 50%;
		justify-content: center;
		align-items: center;
	}

	.brand_img {
		width: 100rpx;
		height: 100rpx;
	}

	.shop {
		height: 200rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		display: flex;
	}

	.shopimg {
		margin-right: 20rpx;
	}

	.shopimg image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		/* outline: 2px solid red; */
	}

	.shopname {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.shopjoin {
		width: 104rpx;
		height: 32rpx;
		border: 2rpx solid #FFC300;
		font-size: 20rpx;
		color: #FFC300;
		border-radius: 20rpx;
		line-height: 32rpx;
		text-align: center;
		margin-top: 8rpx;
	}

	.monthgod {
		font-size: 20rpx;
		color: #000000;
		margin-top: 8rpx;
	}

	.shopmoney {
		margin-top: 10rpx;
		padding-bottom: 30rpx;
		position: relative;
		border-bottom: 4rpx solid #F1F1F1;
	}

	.shopmoney .Qbuy {
		width: 86rpx;
		height: 44rpx;
		background-color: #FCC100;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 44rpx;
		margin-left: 232rpx;
		position: absolute;
		top: 2rpx;
		left: 166rpx;
	}

	.intext {
		font-size: 24rpx;
		color: #000000;
		display: block;
		width: 490rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.Onetag {
		width: 116rpx;
		height: 44rpx;
		background-color: #FCC100;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 44rpx;
		margin-left: 232rpx;
		position: absolute;
		top: -50rpx;
		left: 140rpx;
	}
</style>
